<template>
 <StackLayout class="cell" height="115">
  <GridLayout class="top" height="45" columns="auto, auto, *, auto">
    <label :class="isBuyOrSell? 'buy' : 'sell'" col="0" :text="isBuyOrSell? 'BUY' : 'SELL'" verticalAlignment="center"/>
    <label class="date" col="1" :text="dateReform" verticalAlignment="center"/>
    <label v-if="!noPairDisplay && order.baseCoin" col="2" class="pair" :text="`${order.baseCoin}/${order.quoteCoin}`" verticalAlignment="center"/>
    <label class="status" col="3" text="Cancel" @tap="cancelPressed" verticalAlignment="center" horizontalAlignment="right"/>
  </GridLayout>
  <GridLayout columns="3*, 2*, 2*" rows="*, *">
    <label class="label" col="0" row="0" text="Price" verticalAlignment="center"/>
    <label class="label" col="1" row="0" text="Amount" verticalAlignment="center"/>
    <label class="label" col="2" row="0" text="Executed" horizontalAlignment="right" verticalAlignment="center"/>
    <label class="cell-content" col="0" row="1" :text="order.price" />
    <label class="cell-content" col="1" row="1" :text="order.amount" />
    <label  class="cell-content" col="2" row="1" :text="order.executed" horizontalAlignment="right"/>
  </GridLayout>
</StackLayout>
</template>
<script>
require('~/utils/dateFormat');
import {dataBus} from '~/business/DataBus'

export default {
  props: ['order', 'isBuy', 'onCanceld', 'noPairDisplay'],
  computed: {
    isBuyOrSell() {
      if (this.isBuy == true) {
        return true
      } else if (this.isBuy == false) {
        return false
      } else {
        return this.order.type == 'buy' ? true : false
      }
    },
    dateReform() {
      let date = this.order.date
      date = date.replace(' ', 'T')
      let timeStamp = Date.parse(date)
      let newDate = new Date(timeStamp)
      return newDate.format('HH:MM mm/dd')
    }
  },
  methods: {
    cancelPressed() {
      const self = this
      dataBus.cancelOrder(this.order.id, {
        onSuccess: () => {
          self.onCanceld && self.onCanceld()
          alert({
            title: 'Success',
            message: 'Delete successfully',
            okButtonText: 'OK',
          })
        },
        onError: (code, msg) => {
          alert(msg)
        }
      })
    }
  }
}
</script>

<style scoped>
  .cell {
    padding-left: 12;
    padding-right: 12;
    margin-bottom: 10;
    background: #253954;
  }
  .top {
    border-bottom-width: 1;
    border-bottom-color: #274867;
  }
  .sell {
    color: #DC3E32;
    font-size: 14;
  }
  .buy {
    color: #1AC86A;
    font-size: 14;
  }
  .date {
    color: #6292BE;
    font-size: 12;
    margin-left: 5;
  }
  .pair {
    color: white;
    font-size: 14;
    margin-left: 20;
  }
  .status {
    color: #01ECF4;
    font-size: 14;
    background-color: transparent;
  }
  .label {
    color: #6292BE;
    font-size: 12;
  }
  .cell-content {
    color: white;
    font-size: 14;
  }
</style>
